<template>
  <template v-if="filterColumn.type === `index`">
    <el-table-column show-overflow-tooltip align="center" width="55px" v-bind="filterColumn">
      <template #header="scope">
        <template v-if="column.header">
          <BaseRender :render="column.header" v-bind="{ ...scope, item: column }"></BaseRender>
        </template>
        <template v-else>
          {{ scope.column.label || `序号` }}
        </template>
      </template>
      <template #default="scope">
        <BaseRender :render="column.render || indexRender" v-bind="{ ...scope, item: column }"></BaseRender>
      </template>
    </el-table-column>
  </template>
  <template v-else-if="filterColumn.type === `selection`">
    <el-table-column align="center" v-bind="filterColumn">
      <template #default="scope" v-if="column.render">
        <BaseRender :render="column.render" v-bind="{ ...scope, item: column }"></BaseRender>
      </template>
    </el-table-column>
  </template>
  <template v-else>
    <el-table-column
      v-if="isShowColumn(filterColumn)"
      show-overflow-tooltip
      header-align="center"
      align="center"
      v-bind="filterColumn"
    >
      <template #header="scope">
        <template v-if="column.header">
          <BaseRender :render="column.header" v-bind="{ ...scope, item: column }"></BaseRender>
        </template>
        <template v-else>
          <template v-if="filterColumn.prop">
            <slot :name="`${filterColumn.prop}Header`" v-bind="{ ...scope, item: column }">{{
              scope.column.label
            }}</slot>
          </template>
          <template v-else>
            {{ scope.column.label }}
          </template>
        </template>
      </template>
      <template #default="scope">
        <template v-if="column.children && column.children.length">
          <BaseTableColumn
            v-for="(col, colIdx) in column.children"
            :key="col.prop ? col.prop + colIdx : colIdx"
            :column="col"
          >
            <template v-for="slot in Object.keys($slots)" #[slot]="colScope">
              <slot :name="slot" v-bind="{ ...colScope, item: col }"></slot>
            </template>
          </BaseTableColumn>
        </template>
        <template v-else-if="column.render">
          <BaseRender :render="column.render" v-bind="{ ...scope, item: column }"></BaseRender>
        </template>
        <template v-else-if="column.type === 'input'">
          <el-input v-model="scope.row[scope.column.property]"></el-input>
        </template>
        <template v-else-if="column.type === 'progress'">
          <template v-if="scope.row[scope.column.property] <= 0">
            <span>待下载</span>
          </template>
          <template v-else-if="scope.row[scope.column.property] >= 100">
            <span style="color: rgb(142, 209, 111)">已完成</span>
          </template>
          <template v-else>
            <el-progress :percentage="scope.row[scope.column.property]" color="#f56c6c" />
          </template>
        </template>
        <template v-else-if="column.operaterList" class="operator">
          <template v-for="(itemName, index) in column.operaterList" :key="index">
            <el-button class="item" type="primary" @click="itemName.operater({ ...scope, item: column })">
              <slot v-if="itemName.type === 'progress'">
                {{ scope.row[itemName.prop] == 0 || scope.row[itemName.prop] >= 100 ? itemName.name : itemName.unname }}
              </slot>
              <slot v-else>
                {{ itemName.name }}
              </slot>
            </el-button>
          </template>
        </template>
        <template v-else>
          <slot :name="filterColumn.prop" v-bind="{ ...scope, item: column }">{{
            scope.row[scope.column.property]
          }}</slot>
        </template>
      </template>
    </el-table-column>
  </template>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import BaseRender from './BaseRender.vue';

defineOptions({
  name: 'BaseTableColumn',
});

const props = defineProps({
  column: {
    type: Object,
    default: () => ({}),
  },
  pageInfo: {
    type: Object,
    default: () => ({
      pageNum: 1,
      pageSize: 20,
      total: 0,
    }),
  },
});



const filterColumn = computed(() => {
  const { children, ...args } = props.column;
  return args;
});

const indexRender = ({ $index }) => {
  return ($index   + 1) +(props.pageInfo.pageSize * (props.pageInfo.pageNum - 1))
};

const isShowColumn = (item) => {
  const { isShow = true } = item;
  if (typeof isShow === 'function') return isShow(item);
  return isShow;
};
</script>

<style lang="less" scoped>
.operator {
  display: flex;
  flex-direction: row;
  width: 100%;
  .item {
    margin-left: 8px;
  }
}
</style>
